<template>
  <view class="container">
    <view class="header">
      <text class="title">账户管理</text>
      <text class="subtitle">管理您的账户信息和安全设置</text>
    </view>
    
    <Card class="account-card">
      <view class="account-info">
        <view class="avatar">
          <image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-img" />
          <view v-else class="avatar-placeholder">头像</view>
        </view>
        <view class="user-details">
          <text class="username">{{ userInfo.username }}</text>
          <text class="nickname">{{ userInfo.nickname }}</text>
        </view>
      </view>
    </Card>
    
    <Card class="menu-card">
      <view class="menu-item" @click="goToEditProfile">
        <view class="menu-content">
          <text class="menu-icon">👤</text>
          <view class="menu-text">
            <text class="menu-title">个人信息</text>
            <text class="menu-desc">修改头像、昵称等个人信息</text>
          </view>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToChangePassword">
        <view class="menu-content">
          <text class="menu-icon">🔒</text>
          <view class="menu-text">
            <text class="menu-title">修改密码</text>
            <text class="menu-desc">修改登录密码</text>
          </view>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToSecuritySettings">
        <view class="menu-content">
          <text class="menu-icon">🛡️</text>
          <view class="menu-text">
            <text class="menu-title">安全设置</text>
            <text class="menu-desc">设备管理、登录验证等</text>
          </view>
        </view>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToNotificationSettings">
        <view class="menu-content">
          <text class="menu-icon">🔔</text>
          <view class="menu-text">
            <text class="menu-title">通知设置</text>
            <text class="menu-desc">管理各类通知的接收设置</text>
          </view>
        </view>
        <text class="arrow">></text>
      </view>
    </Card>
    
    <Card class="danger-card">
      <view class="menu-item" @click="showLogoutConfirm">
        <view class="menu-content">
          <text class="menu-icon danger">🚪</text>
          <view class="menu-text">
            <text class="menu-title danger">退出登录</text>
          </view>
        </view>
      </view>
    </Card>
  </view>
</template>

<script>
import { getStorage, removeStorage } from '../../utils/storage.js';

export default {
  data() {
    return {
      userInfo: {
        username: 'user123',
        nickname: '学习助手用户',
        avatar: ''
      }
    };
  },
  
  onLoad() {
    // 获取用户信息
    const userInfo = getStorage('userInfo');
    if (userInfo) {
      this.userInfo = userInfo;
    }
  },
  
  methods: {
    goToEditProfile() {
      uni.navigateTo({
        url: '/pages/account/edit-profile'
      });
    },
    
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/account/change-password'
      });
    },
    
    goToSecuritySettings() {
      uni.showToast({
        title: '安全设置功能待实现',
        icon: 'none'
      });
    },
    
    goToNotificationSettings() {
      uni.showToast({
        title: '通知设置功能待实现',
        icon: 'none'
      });
    },
    
    showLogoutConfirm() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账户吗？',
        success: (res) => {
          if (res.confirm) {
            this.handleLogout();
          }
        }
      });
    },
    
    handleLogout() {
      // 清除登录状态
      removeStorage('userInfo');
      removeStorage('isLogin');
      
      uni.showToast({
        title: '已退出登录',
        icon: 'success'
      });
      
      // 跳转到登录页面
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/auth/login'
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.account-card {
  margin-bottom: $spacing-base;
}

.account-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: $spacing-base;
  overflow: hidden;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  color: #fff;
  font-size: $font-size-sm;
}

.user-details {
  flex: 1;
}

.username {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.nickname {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.menu-card, .danger-card {
  margin-bottom: $spacing-base;
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-base 0;
  border-bottom: 1rpx solid $text-tertiary;
  
  &:last-child {
    border-bottom: none;
  }
}

.menu-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: $spacing-base;
  
  &.danger {
    color: $error-color;
  }
}

.menu-text {
  flex: 1;
}

.menu-title {
  font-size: $font-size-base;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
  
  &.danger {
    color: $error-color;
  }
}

.menu-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.arrow {
  font-size: $font-size-lg;
  color: $text-secondary;
}
</style>